<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/*图片脱离文档流--文字包含在图片周边*/
				float: right;
				margin-right: 50px; /* 图片与文字链接处间隙*/
				margin-bottom: 50px;/* 图片与文字链接处间隙*/
			}
			p{
				font-size: 16px; /*页面默认字体尺寸*/
				line-height: 20px; /*浮动文字，行高无法设定*/
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/3.png" alt="魔丸" width="250px" height="250px">
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis culpa expedita ipsum quibusdam. Odit nisi tempora eligendi sit quis saepe debitis tenetur temporibus quae similique, officiis quaerat, sint dolor doloribus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima itaque iusto magni. Porro non veritatis eligendi officia iusto commodi, natus perferendis delectus veniam voluptate deleniti! Repudiandae voluptas nobis harum soluta? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum perferendis doloribus ipsa eius assumenda vero delectus animi deleniti rem recusandae accusantium esse quos rerum magnam, debitis ea officiis repellat optio?</p>
	</body>
</html>